<template>
	<el-form size="large" :model="formPass" ref="ruleFormRef" :rules="rulesPass" class="login-content-form">
		<el-form-item class="login-animation1">
			<el-input text placeholder="请输入用户名" autofocus v-model="formPass.username" clearable autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon">
						<User />
					</el-icon>
				</template>
			</el-input>
		</el-form-item>
		<el-form-item class="login-animation2">
			<el-input :type="state.isShowPassword ? 'text' : 'password'" placeholder="请输入密码"  v-model="formPass.password"
				@keyup.enter.native="onSignIn(ruleFormRef)" autocomplete="off">
				<template #prefix>
					<el-icon class="el-input__icon">
						<Unlock />
					</el-icon>
				</template>
				<template #suffix>
					<el-icon class="iconfont el-input__icon login-content-password" v-if="!state.isShowPassword"
						@click="state.isShowPassword = !state.isShowPassword">
						<View />
					</el-icon>
					<el-icon class="iconfont el-input__icon login-content-password" v-if="state.isShowPassword"
						@click="state.isShowPassword = !state.isShowPassword">
						<Hide />
					</el-icon>

				</template>
			</el-input>
		</el-form-item>

		<el-form-item class="login-animation4">
			<el-button type="primary" class="login-content-submit" round @click="onSignIn(ruleFormRef)"
				:loading="state.loading.signIn">
				<span>登 录</span>
			</el-button>
		</el-form-item>
	</el-form>
</template>

<script setup lang="ts" name="loginAccount">
import { reactive } from 'vue';
import type { FormInstance } from 'element-plus'
import { useRouter } from "vue-router"
import { loginGetApi } from "@/api/login"
import { setTokens, setStorage, setExpireTime,getToken } from "@/utils/auth"
import { useUserInfoStore } from "@/store/user"
import { useColorStore } from "@/store/common"
import { accountMyApiGet } from "@/api/userMangement"
import { menuStore } from "@/store/menu"
import router1 from '@/router/index'
import { NextLoading } from '@/utils/loading';


const userStore = useUserInfoStore()
const useColor = useColorStore()
const useMenuStore = menuStore()
const { setUserInfo } = userStore
const { getProvince } = useColor
const { getMenuList } = useMenuStore
const ruleFormRef = ref<FormInstance>()
const router = useRouter()

const formPass = reactive({
	username: '',
	password: '',

})
const rulesPass = reactive({
	username: [
		{
			required: true,
			message: "请输入登录账号！",
			trigger: "blur",
			informType: "warning"
		}
	],
	password: [
		{
			required: true,
			message: "请输入登录密码！",
			trigger: "blur",
			informType: "warning"
		}
	]
})

const state = reactive({
	isShowPassword: false,
	loading: {
		signIn: false,
	},
});

const onSignIn = async (formEl: FormInstance | undefined) => {
	if (!formEl) return
	await formEl.validate(async (valid, fields) => {
		if (valid) {
			state.loading.signIn = true;

			const res = await loginGetApi(formPass)
			if (res.code == 20000) {
				// 存一个登录时间 和 一个过期时间 
				setExpireTime(new Date().getTime() + 24 * 60 * 60 * 1000)
				setTokens(res.data.accessToken)
				
				// // 菜单
				await getMenuList(router1)
				console.log(getToken(),'getToken');

				const userDetail = await accountMyApiGet()
				setUserInfo(userDetail.data)
				router.push("/")
				setStorage('targetPath', '/')
				getProvince()


				state.loading.signIn = false;
				NextLoading.start();

			} else {
				state.loading.signIn = false;

			}

		} else {
			state.loading.signIn = false;
			console.log('error submit!', fields)
		}
	})
}
</script>

<style scoped lang="scss">
.login-content-form {
	margin-top: 20px;

	@for $i from 1 through 4 {
		.login-animation#{$i} {
			opacity: 0;
			animation-name: error-num;
			animation-duration: 0.5s;
			animation-fill-mode: forwards;
			animation-delay: calc($i/10) + s;
		}
	}

	.login-content-password {
		display: inline-block;
		width: 20px;
		cursor: pointer;

		&:hover {
			color: #909399;
		}
	}

	.login-content-code {
		width: 100%;
		padding: 0;
		font-weight: bold;
		letter-spacing: 5px;
	}

	.login-content-submit {
		width: 100%;
		letter-spacing: 2px;
		font-weight: 300;
		margin-top: 15px;
	}
}
</style>
